<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康记录详情 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">健康记录详情</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group me-2">
                            <a href="${pageContext.request.contextPath}/health/list" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                            <a href="${pageContext.request.contextPath}/health/edit?id=${healthRecord.recordId}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-edit"></i> 编辑记录
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteRecord(${healthRecord.recordId})">
                                <i class="fas fa-trash"></i> 删除记录
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 健康记录详情 -->
                <div class="row">
                    <div class="col-lg-8">
                        <!-- 基本信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-info-circle text-primary"></i> 基本信息
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td class="fw-bold" style="width: 120px;">记录ID：</td>
                                                <td>${healthRecord.recordId}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">宠物姓名：</td>
                                                <td>
                                                    <a href="${pageContext.request.contextPath}/pet/view?id=${healthRecord.pet.petId}" 
                                                       class="text-decoration-none">
                                                        ${healthRecord.pet.petName}
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">宠物类型：</td>
                                                <td>${healthRecord.pet.petType} - ${healthRecord.pet.breed}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">就诊日期：</td>
                                                <td>
                                                    <fmt:formatDate value="${healthRecord.visitDate}" pattern="yyyy年MM月dd日"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td class="fw-bold" style="width: 120px;">医生姓名：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.doctorName}">
                                                            ${healthRecord.doctorName}
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-muted">未填写</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">费用：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.cost}">
                                                            <span class="text-success fw-bold">
                                                                ¥<fmt:formatNumber value="${healthRecord.cost}" pattern="#,##0.00"/>
                                                            </span>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-muted">未填写</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">复诊日期：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.nextVisitDate}">
                                                            <fmt:formatDate value="${healthRecord.nextVisitDate}" pattern="yyyy年MM月dd日"/>
                                                            <c:if test="${healthRecord.needsFollowUp()}">
                                                                <span class="badge bg-warning ms-2">需复诊</span>
                                                            </c:if>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-muted">无需复诊</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold">记录时间：</td>
                                                <td>
                                                    <fmt:formatDate value="${healthRecord.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 症状描述 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-stethoscope text-warning"></i> 症状描述
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.symptoms}">
                                        <p class="mb-0" style="white-space: pre-wrap;">${healthRecord.symptoms}</p>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted mb-0">无症状描述</p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 诊断结果 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-diagnoses text-info"></i> 诊断结果
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.diagnosis}">
                                        <p class="mb-0" style="white-space: pre-wrap;">${healthRecord.diagnosis}</p>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted mb-0">无诊断结果</p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 治疗方案 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-procedures text-success"></i> 治疗方案
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.treatment}">
                                        <p class="mb-0" style="white-space: pre-wrap;">${healthRecord.treatment}</p>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted mb-0">无治疗方案</p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 用药记录 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-pills text-danger"></i> 用药记录
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.medication}">
                                        <p class="mb-0" style="white-space: pre-wrap;">${healthRecord.medication}</p>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted mb-0">无用药记录</p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 备注信息 -->
                        <c:if test="${not empty healthRecord.notes}">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-sticky-note text-secondary"></i> 备注信息
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-0" style="white-space: pre-wrap;">${healthRecord.notes}</p>
                                </div>
                            </div>
                        </c:if>
                    </div>

                    <!-- 侧边栏信息 -->
                    <div class="col-lg-4">
                        <!-- 宠物信息卡片 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-paw text-primary"></i> 宠物信息
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="text-center mb-3">
                                    <c:choose>
                                        <c:when test="${not empty healthRecord.pet.photoUrl}">
                                            <img src="${pageContext.request.contextPath}/${healthRecord.pet.photoUrl}" 
                                                 alt="${healthRecord.pet.petName}" class="img-fluid rounded-circle" 
                                                 style="width: 100px; height: 100px; object-fit: cover;">
                                        </c:when>
                                        <c:otherwise>
                                            <div class="bg-light rounded-circle d-flex align-items-center justify-content-center" 
                                                 style="width: 100px; height: 100px; margin: 0 auto;">
                                                <i class="fas fa-paw fa-2x text-muted"></i>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="fw-bold">姓名：</td>
                                        <td>${healthRecord.pet.petName}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">类型：</td>
                                        <td>${healthRecord.pet.petType}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">品种：</td>
                                        <td>${healthRecord.pet.breed}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">性别：</td>
                                        <td>
                                            <c:choose>
                                                <c:when test="${healthRecord.pet.gender == 'male'}">雄性</c:when>
                                                <c:when test="${healthRecord.pet.gender == 'female'}">雌性</c:when>
                                                <c:otherwise>未知</c:otherwise>
                                            </c:choose>
                                        </td>
                                    </tr>
                                    <c:if test="${not empty healthRecord.pet.age}">
                                        <tr>
                                            <td class="fw-bold">年龄：</td>
                                            <td>${healthRecord.pet.age}个月</td>
                                        </tr>
                                    </c:if>
                                    <c:if test="${not empty healthRecord.pet.weight}">
                                        <tr>
                                            <td class="fw-bold">体重：</td>
                                            <td>${healthRecord.pet.weight}kg</td>
                                        </tr>
                                    </c:if>
                                </table>
                                <div class="text-center">
                                    <a href="${pageContext.request.contextPath}/pet/view?id=${healthRecord.pet.petId}" 
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> 查看宠物详情
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-cogs text-secondary"></i> 操作
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="${pageContext.request.contextPath}/health/edit?id=${healthRecord.recordId}" 
                                       class="btn btn-primary">
                                        <i class="fas fa-edit"></i> 编辑记录
                                    </a>
                                    <button type="button" class="btn btn-danger" onclick="deleteRecord(${healthRecord.recordId})">
                                        <i class="fas fa-trash"></i> 删除记录
                                    </button>
                                    <a href="${pageContext.request.contextPath}/health/add?petId=${healthRecord.pet.petId}" 
                                       class="btn btn-success">
                                        <i class="fas fa-plus"></i> 添加新记录
                                    </a>
                                    <a href="${pageContext.request.contextPath}/health/list?petId=${healthRecord.pet.petId}" 
                                       class="btn btn-outline-secondary">
                                        <i class="fas fa-history"></i> 查看历史记录
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 删除记录
        function deleteRecord(recordId) {
            if (confirm('确定要删除这条健康记录吗？此操作不可恢复！')) {
                window.location.href = '${pageContext.request.contextPath}/health/delete?id=' + recordId;
            }
        }
    </script>
</body>
</html>
